<template>
    <div class="songSheetInfo">
        <div class="songSheetInfoTop">
            <div class="songSheetImg">
                <img :src="songSheetInfo?.coverImgUrl" alt="">
                <div>{{ formatNumber(songSheetInfo?.playCount) }}</div>
            </div>
            <div class="introduce">
                <h2 style="margin-bottom: 10px;">{{ songSheetInfo?.name }}</h2>
                <div class="content">
                    {{ songSheetInfo?.description }}
                    <span v-if="songSheetInfo?.description.length > 80" @click="isContent = true">详情</span>
                </div>
                <div v-if="isContent" class="contentNone">
                    <div>{{ songSheetInfo?.description }}</div>
                    <svg @click="isContent = false" t="1702868841635" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2999" width="20" height="20">
                        <path
                            d="M569.295426 535.433712l236.084926-234.864122c11.162224-11.106965 11.219529-29.105898 0.112564-40.269146-11.133571-11.189853-29.100782-11.220552-40.266076-0.112564L529.082562 495.076562l-234.091526-234.8017c-11.081383-11.106965-29.103852-11.164271-40.269146-0.056282-11.137665 11.106965-11.164271 29.131481-0.058328 40.294728l234.034221 234.745419L252.727467 769.979586c-11.164271 11.106965-11.219529 29.104875-0.112564 40.270169 5.553483 5.583159 12.871145 8.399297 20.188808 8.399297 7.261381 0 14.526855-2.758834 20.080338-8.286734l236.028645-234.777141L765.140882 812.525588c5.553483 5.586229 12.843516 8.375761 20.161179 8.375761 7.29208 0 14.554484-2.789533 20.106943-8.317433 11.132548-11.106965 11.164271-29.100782 0.056282-40.266076L569.295426 535.433712 569.295426 535.433712zM569.295426 535.433712"
                            fill="#272636" p-id="3000"></path>
                    </svg>
                </div>
                <div class="creator">
                    <img v-lazys="songSheetInfo?.creator.avatarUrl">
                    <div style="margin-right: 10px;">{{ songSheetInfo?.creator.nickname }}</div>
                    <div v-if="songSheetInfo?.tags.length > 0">
                        <span>标签: </span>
                        <span style="color: rgb(190, 255, 233);" v-for="(tag, index) in songSheetInfo?.tags" :key="index">{{
                            tag }}<span v-if="index < songSheetInfo?.tags.length - 1">、</span></span>
                    </div>
                </div>
                <div class="tool">
                    <button @click="playAllSong">播放全部</button>
                </div>
            </div>
        </div>
        <div class="footers">
            <div class="item" style="border-bottom: 0.1px solid rgba(255,255,255,0.1);font-size: 10px;">
                <div>#</div>
                <div style="width: 30vw;">标题</div>
                <div style="width: 20.5vw;">专辑</div>
                <div>时长</div>
            </div>
            <div class="item items" v-for="(item, index) in songSheetInfo?.tracks" @click="handlePlaySong(item)">
                <div style="width: 1vw;text-align: center;" class="item1">{{ index + 1 }}</div>
                <div style="width: 30vw;" class="item2">
                    <img v-lazys="item.al.picUrl">
                    <div class="itemName">
                        <div class="songName">
                            <span>{{ item.name }}</span>
                            <span>{{ item.alia.length != 0 ? `(${item.alia[0]})` : '' }}</span>
                        </div>
                        <div class="authorName">{{ item.ar[0].name }}
                            <div v-if="item.mv" @click.stop="toMv(item)" class="MV" style="display:flex;">
                                <div>MV</div>
                                <svg t="1703062507513" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="5245" width="14" height="14">
                                    <path
                                        d="M761.856 405.504l-255.68-170.432A128 128 0 0 0 307.2 341.568v340.864a128 128 0 0 0 199.008 106.496l255.648-170.432a128 128 0 0 0 0-212.992z"
                                        p-id="5246" fill="#d81e06"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item3" style="width: 20vw;" @click="(event) => goAblum(event, item.al.id)">
                    <span>{{ item.al.name }}</span>
                </div>
                <div class="item4" style="font-size: 10px;">{{ formateTime(item.dt) }}</div>
            </div>
        </div>
        <div style="position: absolute;top: 60vh;width: 75%;background: rgba(0,0,0,0.4);" v-loading="loading"
            element-loading-text="加载歌单列表中🍒...">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, toRefs, onMounted } from 'vue'
// 引入vue-router的useRouter方法
import { useRouter, useRoute } from 'vue-router'
// 引入counter的store
import useCounterStore from '@/stores/counter'
// 引入api
import * as songSheetAPI from '@/api/songSheet/index'
// 获取路由
const router = useRouter()
const route = useRoute()
const isContent = ref(false)//是否显示详情
const { playList, songInfo } = toRefs(useCounterStore())//获取pinia中的数据
const { formatNumber, handlePlaySong, formateTime } = useCounterStore()//获取pinia中的方法
const loading = ref<boolean>(false)//加载状态
const songSheetInfo = ref({} as any)//歌单详情

//播放当前表单的全部歌曲
const playAllSong = () => {
    //将songSheetInfo赋值给playList
    playList.value = songSheetInfo.value.tracks
    //将playList的第一首歌曲赋值给songInfo
    songInfo.value = playList.value[0]
}

//跳转到mv播放页
const toMv = (item: any) => {
    router.push({ path: '/home/mvplay', query: { id: item.mv, name: item.name, artistName: item.al.name, cover: item.al.picUrl, playCount: item.cp } })
}
//跳转专辑详情页
function goAblum(event: any, id: number) {
    event.stopPropagation()//阻止冒泡
    router.push({ path: '/songs/allAlbums', query: { id } })
}

//初始获取歌单详情数据
onMounted(() => {
    // 加载中状态
    loading.value = true
    // 调用API获取歌曲信息
    songSheetAPI.getSongSheetInfo({ id: Number(route.query.id) }).then(({ data }) => {
        // 判断请求是否成功
        if (data.code === 200) {
            console.log(data.playlist);
            songSheetInfo.value = data.playlist
            // 将歌曲信息赋值给songList
            // songList.value = data.playlist.tracks
            // 加载完成状态
            loading.value = false
        }
    })
})

</script>

<style lang="scss" scoped>
.songSheetInfo {
    width: 100%;
    height: 82vh;
    margin-top: 8vh;
    overflow: auto;
    padding-bottom: 8vh;
}

.songSheetInfo::-webkit-scrollbar {
    display: none;
}

.songSheetInfoTop {
    width: 100%;
    height: 25vh;
    padding: 2vw 4vw;
    display: flex;

    .songSheetImg {
        width: 15vw;
        height: 15vw;
        position: relative;
        /* border: 1px solid #fff; */

        >div {
            position: absolute;
            top: 1vh;
            right: 1vw;
            color: #82838E;
            font-size: 10px;
            font-weight: 700;
        }

        img {
            width: 15vw;
            height: 15vw;
            border-radius: 10px;
        }
    }



    .introduce {
        color: #fff;
        margin-left: 4vw;
        position: relative;

        .content {
            width: 100%;
            height: 6vh;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            font-size: 1.262vw;
            color: #82838E;

            span {
                color: #6B83B9;
                position: absolute;
                bottom: 2vh;
                right: 0vw;
                z-index: 9;
                cursor: pointer;
            }
        }
    }
}

.contentNone {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 5vh;
    width: 52.5vw;
    height: 20vh;
    background: #fff;
    z-index: 10;
    border-radius: 10px;
    color: #121212;
    font-size: 1.262vw;

    >div:nth-child(1) {
        width: 90%;
        height: 90%;
        line-height: 160%;
        overflow: auto;
        word-spacing: 4px;
    }

    >div:nth-child(1)::-webkit-scrollbar {
        display: none;
    }

    svg {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

}

.creator {
    display: flex;
    align-items: center;
    /* border: 1px solid red; */
    font-size: 10px;
    margin: 10px 0;
    color: #82838E;

    img {
        width: 3vw;
        height: 3vw;
        border-radius: 50px;
        margin: 0 10px;
    }
}

.tool {
    button {
        background: linear-gradient(to right, #fb0058, #FC3D49);
        border: 0;
        border-radius: 10px;
        color: #fff;
        margin-top: 1vh;
        padding: 8px 20px;
        font-size: 10px;
        cursor: pointer;
    }
}

.footers {
    width: 96%;
    margin-top: 8vh;
    margin-left: 2%;
    /* padding-top: 4vh; */
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;

    .item {
        width: 100%;
        display: flex;
        align-items: center;
        color: #fff;
        /* border: 1px solid red; */
        padding: 10px;
        cursor: pointer;

        >div {
            margin: 0 20px;
        }

        .item2 {
            display: flex;
            align-items: center;
            font-size: 10px;

            img {
                width: 4vw;
                height: 4vw;
                border-radius: 6px;
            }

            .itemName {
                margin: 0 10px;

                .songName {
                    margin-bottom: 4px;

                    span:nth-child(2) {
                        color: #82838E;
                        margin-left: 6px;
                    }
                }
            }
        }

        .item3 {
            font-size: 12px;

            span:hover {
                cursor: pointer;
                border-bottom: 1px solid #fff;
            }
        }
    }

    .items:hover {
        background: rgba(255, 255, 255, 0.1);
    }

}

.authorName {
    height: 20px;
    display: flex;
    align-items: center;
    color: #fff;

    .MV {
        display: flex;
        align-items: center;
        margin-left: 10px;
        border: 1px solid rgb(255, 62, 62);
        border-radius: 2px;
        color: rgb(255, 62, 62);
        padding: 0 0 0 2px;
        font-size: 8px;
    }
}
</style>